<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>handlebars</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="handlebars-v4.0.10.js"></script>
</head>
<body>
    <div id="tableList"></div>
    <hr>
    <div id="tableThisList"></div>
    <hr>
    <div id="tableEachForEach1"></div>
    <hr>
    <div id="tableEachForEach2"></div>
    <hr>
    <div id="indexForeachParent"></div>
    <hr>
    <div id="useWith"></div>
    <hr>
    <div id="useIf"></div>
    <hr>
    <div id="useCompare"></div>
    <hr>
    <div id="useHtml"></div>
    <script id="table1" type="text/x-handlebars-template">
        {{#each student}}
            <tr>
                <td>{{indexAddOne @index}}</td>
                <td>{{name}}</td>
                <td>{{age}}</td>
                <td>{{sex}}</td>
            </tr>
        {{/each}}
    </script>
    <script id="tableThis" type="text/x-handlebars-template">
        {{#each this}}
            <tr>
                <td>{{indexAddOne @index}}</td>
                <td>{{name}}</td>
                <td>{{age}}</td>
                <td>{{sex}}</td>
            </tr>
        {{/each}}
    </script>
    <script id="tableEach1" type="x-handlebars-template">
        <table>
            <tr><th>name</th><th>details</th></tr>
            {{#each this}}
            <tr>
                <td>{{name}}</td>
                <td>{{info}}</td>
            </tr>
            {{/each}}
        </table>
    </script>
    <script id="tableEach2" type="x-handlebars-template">
        {{#each this}}
            {{#each info}}
                {{../name}}的{{this}}<br>
            {{/each}}
        {{/each}}
    </script>
    <script id="indexForeach" type="x-handlebars-template">
        <table>
            {{#each this}}
                <tr>
                    <th>{{parentAdd @index}}.{{name}}</th>
                    {{#each students}}
                        <td>{{../_index}}.{{@index}}:{{name}}</td>
                    {{/each}}
                </tr>
            {{/each}}
        </table>
    </script>
    <script id="withTemplate" type="x-handlebars-template">
        {{#each this}}
            {{name}}
                {{#each this}}
                    {{name}}
                    {{this}}
                {{/each}}
        <br>
        {{/each}}
    </script>
    <script id="ifTemplate" type="x-handlebars-template">
        {{#each this}}
            {{#if name}}
                name:{{name}};
            {{else}}
                hello 该用户还没有名字
            {{/if}}
        {{/each}}
    </script>
    <script id="compareTemplate" type="x-handlebars-template">
        {{#each student}}
            {{#if age}}
                {{#compareAge age 12}}
                    {{name}},{{age}},{{transAge sex}}
                {{else}}
                    {{name}}还未满12岁,{{transAge sex}}
                {{/compareAge}}
            {{/if}}
        <br>
        {{/each}}
    </script>
    <script id="htmlTemplate" type="x-handlebars-template">
        {{#each this}}
            {{#compareAge age 15}}
                {{name}},{{home}}
            {{else}}
                {{name}},{{{home}}}
            {{/compareAge}}
         <br>
        {{/each}}
    </script>
    <script src="index.js"></script>
</body>
</html>